import _ from 'lodash';
import { computed, defineComponent, ref, toRef } from 'vue';
import TBtnGroup from 't/basic/button-group';
import { useI18n } from 'vue-i18n';

export default defineComponent({
  name: 'CmdColumn',
  props: {
    record: Object,
    cmdColConfig: Object,
    rowIndex: Number,
    colCommandVisible: {
      type: Function,
      default(cmd, data) {
        return true;
      },
    },
  },
  emits: ['cmdColClick'],
  setup(props, { attrs, emit, expose, slots }) {
    const { t } = useI18n({ useScope: 'global' });

    const commands = computed(() => {
      return _.sortBy(props.cmdColConfig?.commands, 'inMore').map(cmd => {
        let text = cmd.text;
        if (t) {
          text = t(cmd.ValueInfo_text, cmd.text || '');
          if (text === cmd.ValueInfo_text) {
            text = cmd.text || '';
          }
        }
        return {
          label: text,
          text: cmd.text,
          type: 'text',
          value: cmd.text,
          icon: cmd.icon,
          hint: text,
          visible: props.colCommandVisible(cmd, props.record),
          _CmdColumnCmd_: cmd,
        };
      });
    });

    const showCommands = computed(() => {
      return props.cmdColConfig?.commands.filter(cmd => true != cmd.inMore);
    });

    const autoModel = computed(() => {
      const inMore = _.filter(props.cmdColConfig?.commands, 'inMore');
      return inMore?.length !== props.cmdColConfig?.commands?.length;
    });

    const visible = computed(() => {
      return !!_.find(commands.value, { visible: true });
    });

    const btnGroupItemClick = params => {
      emit('cmdColClick', params._CmdColumnCmd_);
    };

    return () => {
      return (
        <TBtnGroup
          containerGap={24}
          class='cmdColumn_btngroup'
          style='flex-wrap:nowrap;'
          staticItems={commands.value}
          needWatchStaticItems={true}
          // visible={visible.value} /** 组件内部已经支持没有可见项不显示更多图标了 */
          btnSpace='8px'
          moreConf={true}
          autoModel={autoModel.value}
          // autoModel={false}
          hideBorder={true}
          btnDropPop={true}
          noIconAnimation={true}
          moreMaxCount={showCommands.value?.length}
          moreBtnIcon='more_horiz'
          onBtnGroupItemClick={btnGroupItemClick}
        />
      );
    };
  },
});
